<template>
	<div class="container">
		<!-- 商品状态 -->
		<div class="header">
			<div>
				<p>商家已发货</p>
				<p>
					<span>订金金额</span>
					<span>￥</span>
					<span>1999.00</span>
				</p>
			</div>
			<div>
				<img src="../../assets/icon/shop-icon/goods-ok.png" />
			</div>
		</div>
		<hr style="height: .3rem;">
		<!-- 用户信息 -->
		<div class="user-info">
			<div>
				<img src="../../assets/icon/shop-icon/dingwei.png" />
			</div>
			<div>
				<p>
					<span>王小二</span>
					<span>13777777777</span>
				</p>
				<p>浙江省温州市乐清市城南街道33号</p>
			</div>
		</div>
		<hr style="height: .3rem;">
		<!-- 商品信息 -->
		<div class="shop-info">
			<div>
				<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1071736856,3580973210&fm=26&gp=0.jpg" />
			</div>
			<div>
				<p>多功能垃圾回收箱</p>
				<p>
					<span>数量</span>
					<span>X2</span>
				</p>
				<p>
					<span>
						<span>合计：</span>
						<span>￥</span>
						<span>1999.00</span>
					</span>
				</p>
			</div>
		</div>
		<hr style="height: .3rem;">
		<!-- 订单信息 -->
		<div class="order-info">
			<p>
				<span>订单编号</span>
				<span>11111111111111111111111</span>
			</p>
			<p>
				<span>创建时间</span>
				<span>2019-01-01 14:49:18</span>
			</p>
		</div>
		<hr style="height: .3rem;">
		<!-- 支付信息 -->
		<div class="pay-info">
			<p>
				<span>支付单号</span>
				<span>11111111111111111111111</span>
			</p>
			<p>
				<span>支付方式</span>
				<span>支付宝支付</span>
			</p>
			<p>
				<span>创建时间</span>
				<span>2019-01-01 14:49:18</span>
			</p>
		</div>
		
		<div style="height: 1rem;"></div>
		<!-- 查看信息，确认收货 -->
		<div class="foot-handle">
			<div>查看信息</div>
			<div>确认收货</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				headerImgs: {
					// 商家已发货
					goodsOk: '../../assets/icon/shop-icon/goods-ok.png',
					// 已完成
					success: '../../assets/icon/shop-icon/success.png',
					// 待付款
					waitBuy: '../../assets/icon/shop-icon/wait-buy.png',
					// 待发货
					waitGoods: '../../assets/icon/shop-icon/wait-buy.png'
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.container {
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: .3rem;
			background: #fff;

			div:first-child {
				display: flex;
				flex-direction: column;

				p:first-child {
					font-size: 20px;
					margin-bottom: .4rem;
				}

				p:last-child {
					span:nth-child(1) {
						font-size: 13px;
					}

					span:nth-child(2) {
						font-size: 12px;
						margin: 0 .2rem;
						color: #D0021B;
					}

					span:nth-child(3) {
						font-size: 18px;
						color: #D0021B;
					}
				}
			}

			img {
				width: 1.6rem;
			}
		}

		.user-info {
			padding: .3rem;
			background: #fff;
			display: flex;
			align-items: center;
			div:first-child {
				img {
					width: .6rem;
					margin-right: .3rem;
				}
			}
			div:last-child {
				p:first-child {
					margin-bottom: .2rem;
					
					span:last-child {
						color: #9B9B9B;
						margin-left: .3rem;
					}
				}
			}
		}
	
		.shop-info {
			padding: .3rem;
			background: #fff;
			display: flex;
			
			div:first-child {
				img {
					width: 2rem;
					margin-right: .2rem;
				}
			}
			
			div:last-child {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				p:nth-child(2) {
					margin: .2rem 0 .56rem 0;
					span:first-child {
						color: #9B9B9B;
						margin-right: .2rem;
					}
				}
				
				p:last-child {
					text-align: right;
					span:first-child {
						color: #9B9B9B;
					}
					span:nth-child(2) {
						font-size: 12px;
						color: #D0021B;
					}
					span:last-child {
						font-size: 18px;
						color: #D0021B;
					}
				}
			}
		}
	
		.order-info {
			color: #9B9B9B;
			padding: .3rem;
			background: #fff;
			p:first-child {
				margin-bottom: .15rem;
			}
			p {
				span:first-child{
					margin-right: .3rem;
				}
			}
		}
	
		.pay-info {
			padding: .3rem;
			background: #fff;
			p {
				margin-bottom: .15rem;
				color: #9B9B9B;
				span:first-child {
					margin-right: .3rem;
				}
			}
			p:last-child {
				margin-bottom: 0rem;
			}
		}
	
		.foot-handle {
			height: 1rem;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: fixed;
			bottom: 0rem;
			background: #fff;
			width: 100vw;
			div {
				width: 1.6rem;
				height: .6rem;
				border-radius: .3rem;
				text-align: center;
				line-height: .6rem;
			}
			div:first-child {
				border: 1px solid #979797;
				color: #9B9B9B;
			}
			div:last-child {
				color: #218BFB;
				border: 1px solid #218BFB;
				margin: 0 .3rem 0 .4rem;
			}
		}
	}
</style>
